<template>
	<view class="guess">
		<!-- 猜你喜欢 -->
		<view class="f-header m-t">
			<view class="tit-box">
				<text class="line"></text>
				<text class="tit">猜你喜欢</text>
				<text class="line"></text>
			</view>
		</view>
		
		<view class="guess-section">
			<view 
				v-for="(item, index) in goodsList" :key="index"
				class="guess-item"
				@click="navToDetailPage(item)"
			>
				<view class="image-wrapper">
					<image :src="item.defaultAlbum" mode="aspectFill"></image>
				</view>
					<text class="title clamp">{{item.pName}}</text>
					<text class="price"><text class="unit">￥</text>{{item.fSalePrice}} <text class="pay">{{item.iSales}}人已付款</text>
						<image class="collect" src="/static/img/2/2-13.png" mode="aspectFill"></image>
						
					</text>
				
				
			</view>
		</view>
	</view>
	
   
</template>

<script>
    export default {
        name: "guess",
        data(){
            return {
				order:"asc",
				pagesize:12,
				pageindex:1,
				goodsList:[]
				
            }
        },
		props:["goods_id_exclude","categoryid","type"],
		async mounted(){
			let datas = {
				queryCondition:{
				    order: [
						{
						fieldname:"iOrder", 
						direction:this.order	
						}
						
				    ],
				    pagesize: this.pagesize,
				    pageindex: this.pageindex,
				    where: [
				    { fieldname: "goods_id_exclude",valuefrom: this.goods_id_exclude.join(",")},
				    { fieldname: "categoryid",valuefrom: this.categoryid.join(",")},
				    {  fieldname: "type", valuefrom: this.type}
				    ],
				    }
			}
			await this.$Request.post(this.$api.httpApi.home.getRecommendCartList+
			'&token='+this.$token,datas).then(res => {
				if (res.code == 200) {
						this.goodsList = res.data.data
					}
				})
		},
		methods:{
			navToDetailPage(item){
				let id = item.pid;
				uni.navigateTo({
					url: `/pages/detail/index?id=${id}`
				})
			}
		}
		
      

    }
</script>

<style lang="scss">
/* 猜你喜欢 */
.f-header{
		display:flex;
		align-items:center;
		// height: 140upx;
		padding: 48upx 30upx 24upx;
		.tit-box{
			flex: 1;
			display: flex;
			// flex-direction: column;
			justify-content: center;
			align-items: center;
			.tit{
				display: inline-block;
				font-size:27upx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(51,51,51,1);
				margin: 0 10upx;
			}
			.line{
				display: inline-block;
				width:52upx;
				height:2upx;
				background:rgba(102,102,102,1)
			}
		}
		
		
	}
	.guess-section{
		display:flex;
		flex-wrap:wrap;
		padding: 0 30upx;
		
		.guess-item{
			display:flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 29upx;
			background: #fff;
			margin-bottom: 21upx;
		
			&:nth-child(2n+1){
				margin-right: 21upx;
			}
			
		}
		.image-wrapper{
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;
			background: #fff;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title{
			font-size:23upx;
			font-family:Microsoft YaHei;
			font-weight:400;
			color:rgba(68,68,68,1);
			line-height: 35upx;
			padding-left: 30upx;
			padding-right: 30upx;
		}
		.price{
			font-size:26upx;
			font-family:Adobe Heiti Std;
			font-weight:normal;
			color:rgba(240,64,111,1);
			padding-left: 30upx;
			position: relative;
			.pay{
				font-size:17upx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(153,153,153,1);
				margin-left: 6upx;
			}
			.collect{
				position: absolute;
				right: 29upx;
				bottom: 10upx;
				width:30upx;
				height:28upx;
				z-index: 1;
			}
		
		}
		
		
	}
</style>
